<!DOCTYPE html>
<html>
<head>
	<title></title>
    <style type="text/css">
    *{
    	margin:0 auto;
    	padding: 0;
    	list-style:none;

    }
    a{

    }
    .menu{
    	margin:0 auto;
    	width:200px; 	
    	border: 1px solid #ccc;
    }
    .menu div{
    	/* height:150px; */
    	width:100%;
    	
    	background-color: skyblue;
    	text-align:left;
    }
    .menu div p{
    	    	
    	font-weight: bold;
    	background: #ccc;
    	border-bottom: 1px solid #ccc;
    	padding: 5px;
    }
    .menu div ul{display: none;}
    .menu div li{
    	height:26.5px;
    	background:#ebebeb;
    	padding:5px;
    	
    }

    </style>
</head>
<body>
	<div class="menu" id="menu">
		<div>
			<p>web前端</p>
			<ul>
				<li>javascript</li>
				<li>DIV+CSS</li>
				<li>JQuery</li>
			</ul>

   		</div>
   		<div>
			<p>后台脚本</p>
			<ul>
				<li>PHP</li>
				<li>ASP.net</li>
				<li>JSP</li>
			</ul>

   		</div>
   		<div>
			<p>前端框架</p>
			<ul>
				<li>Vue</li>
				<li>React</li>
				<li>Element</li>
			</ul>

   		</div>
    </div>

</body>
<script type="text/javascript" src="jquery-3.3.1/jquery-3.3.1.js"></script>
<script type="text/javascript" src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	console.log(document.getElementsByTagName("ul"));
	var a=document.getElementsByTagName("p");
	var b=document.getElementsByTagName("ul");
	for(var i=0;i<a.length;i++){
		a[i].id=i;
		
		
		a[i].onclick=function(){
			console.log($(this));
          
			if(b[this.id].style.display=="block"){
				b[this.id].style.display="none"
			}
			else{
				b[this.id].style.display="block"
			}//闭包
            
            

            
		};
	}//循环超出作用域
var titles = document.getElementsByTagName("p");

var contents = document.getElementsByTagName("ul");

     // 遍历所有要点击的标题且给它们添加索引及绑定事件

for(let i=0;i<titles.length;i++){

titles[i].onclick = function(){

if(contents[i].style.display == "block"){

contents[i].style.display = "none";

}else{

contents[i].style.display = "block";

}

}

}


	
</script>
</html>